<template>
	<view>
		<!-- 导航 -->
		<view class="nav">
			<view class="navItem" :class="{active: orderListParams.status === item.id}" v-for="item in navList" :key="item.id"
				@click="changeStatus(item.id)">{{item.text}}</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="contentItem" v-for="order in orderList" :key="order._id" @click="goOrderDetail(order._id)">
				<view class="contentItemTitle">
					<view>订单号: {{order.order_sn}}</view>
					<view v-if="order.status===8">已取消</view>
					<view v-if="order.status===2">正在发货</view>
					<view v-if="order.status===1">待付款</view>
					<view v-if="order.status===6">去评价</view>
				</view>
				<view class="contentItemGoods">
					<view class="ocItem" v-for="item in order.goods" :key="item.goods_id">
						<image :src="item.img"></image>
						<view class="ocItemBox">
							<view class="ocItemTitle">{{item.name}}</view>
							<view class="ocItemTag">
								<text>{{item.attr}}</text>
							</view>
							<view class="ocItemPrice">
								<view>￥{{item.price}}</view>
								<view>
									<text>X</text>
									<text>{{item.num}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="totalGoods">
					共{{order.goods.length}}件商品 实付款<text>￥{{order.all_amount}}</text>
				</view>
				<view class="contentItemFooter">
					<view>
						查看详情
					</view>
					<view v-if="order.status===8">删除订单</view>
					<view v-if="order.status===2">联系商家</view>
					<view v-if="order.status===3">查看物流</view>
					<view v-if="order.status===3">确认收货</view>
					<view v-if="order.status===1">待付款</view>
					<view v-if="order.status===6">去评价</view>
				</view>
			</view>
		</view>
		<MyLoading v-model:lodingType="loadType"/>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app'
	import { order } from '@/api'
	import { userStore } from '@/stores/userInfo/userInfo'
	import MyLoading from '@/components/MyLoading'
	// 导航
	let navList = [{
			id: 0,
			text: '全部'
		},
		{
			id: 1,
			text: '待付款'
		},
		{
			id: 2,
			text: '待发货'
		},
		{
			id: 3,
			text: '待收货'
		},
		{
			id: 6,
			text: '已完成'
		}
	]
	// 订单列表的参数
	let orderListParams = reactive({
		uid:'',
		status: '',
		skip: '0',
		limit: '10'
	})
	let loadType = ref('more')
	// 订单列表
	let orderList = ref([])
	// 获取订单列表
	function getOrderList(){
		loadType.value = 'loading'
		orderListParams.skip = orderList.value.length
		order.reqOrderList(orderListParams).then(res => {
			if(res.code === 1) {
				let data = orderList
				data.value.push(...res.data)
				orderList.value = data.value
				if(orderList.value.length >= res.count){
					loadType.value = 'loaded'
				}else {
					loadType.value = 'more'
				}
			}
		})
	}
	// 更改状态
	function changeStatus(id) {
		orderListParams.status = id
		orderList.value = []
		getOrderList()
	}
	function stopStop(){
		if(loadType.value === 'loaded' || loadType.value === 'loading'){
			return
		}
		getOrderList()
	}
	// 更改是待支付还是取消
	// 页面初始化
	onLoad((options) => {
		orderListParams.status = parseInt(options.status)
	
	})
	onShow((options)=>{
		let user = userStore()
		orderList.value = []
		setTimeout(() => {
			orderListParams.uid = user.userInfo._id
			getOrderList()
		},250)
	})
	
	// goOrderDetail 去往订单详情
	function goOrderDetail(orderId) {
		uni.navigateTo({
			url: `/pages/order/orderDetail/orderDetail?orderId=${orderId}`
		})
	}
	onReachBottom(() => {
		stopStop()
	})
</script>

<style lang="scss" scoped>
	.nav {
		position: fixed;
		left: 0;
		right: 0;
		display: flex;
		background-color: #fff;
		justify-content: space-around;
		padding: 15rpx 0;
		z-index: 9999;
		.navItem {
			padding: 15rpx 0;
		}

		.active {
			color: #fdd100;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				height: 5rpx;
				background-color: #fdd100;
				border-radius: 15rpx;
			}
		}
	}

	.content {
		padding: 30rpx 50rpx;
		padding-top: 150rpx;
		&:empty{
			padding-top: 60rpx;
		}
		.contentItem {
			margin-bottom: 30rpx;
			.contentItemTitle {
				@include flex1(space-between, flex-end);
				font-size: 25rpx;

				view:last-child {
					font-size: 20rpx;
					color: #fdd100;
				}
			}

			.contentItemGoods {
				padding: 20rpx 35rpx;
				background-color: #fff;

				.ocItem {
					padding: 20rpx 0;
					display: flex;
					image {
						width: 150rpx;
						height: 150rpx;
						margin-right: 10rpx;
					}
				}

				.ocItemBox {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-content: space-between;
					.ocItemTitle {
						font-size: 25rpx;
						white-space: pre-wrap;
					}
				}

				.ocItemTag {
					font-size: 15rpx;
					margin: 5rpx 0;

					text {
						color: #ccc;
						margin-right: 10rpx;
					}
				}

				.ocItemPrice {
					display: flex;
					align-items: center;
					justify-content: space-between;
				    font-size: 20rpx;
					view {
						display: flex;
						&:first-child {
							color: #fdd100;
						}

						&:last-child {
							display: flex;
							justify-content: center;
							align-items: flex-end;
							color: #ccc;
							text:first-child {
								transform: scale(0.8);
								display: inline-block;
								position: relative;
								top: 2rpx;
							}
						}
					}
				}


			}

			.totalGoods {
				@include flex1(flex-end, baseline);
				margin-bottom: 20rpx;
				font-size: 20rpx;
				color: #ccc;

				text {
					font-size: 30rpx;
					color: #fdd100;
				}
			}

			.contentItemFooter {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				view {
					font-size: 15rpx;
					padding: 10rpx 20rpx;
					border: 1rpx solid #ccc;
					border-radius: 50rpx;
				}

				view:last-child {
					color: #fff;
					background-color: #fdd100;
					border: none;
					margin-left: 20rpx;
				}
			}
		}
	}
	.loadStatus{
		text-align: center;
		padding: 15rpx 0;
		color:#ccc;
		
	}
</style>
